<!--
 * @Descripttion:
 * @version:
 * @Author: tanghao1
 * @Date: 2021-03-01 14:18:55
 * @LastEditors: tanghao1
 * @LastEditTime: 2021-03-22 09:43:17
-->
<template>
  <el-dialog
    ref="refDlg"
    :title="detailData===''? '新增筛选项' : '编辑筛选项'"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :hide-func-bar="true"
    :before-close="clearForm"
    width="650px"
    @close="closeDialog"
  >
    <div v-if="detailData == ''">
      <div>
        <table-box
          ref="refSearchAttrform"
          :table-config="tableConfig"
          table-height="400"
          :other-filters="otherFilters"
          :selected-arry.sync="multipleSelection"
          :off-set="-10"
          @data-change="dataChange"
          @selection-change="handleSelectionChange"
        >
          <el-table-column slot="before" fixed="left" label="全选" type="selection" :reserve-selection="true" />
        </table-box>
        <span>已选择{{ selectData.length }}个属性</span>
        <!-- 列表 -->
        <el-table
          :data="selectData"
          style="width: 100%;margin-top: 10px;"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          row-key="id"
        >
          <el-table-column
            prop="code"
            label="属性编码"
            sortable
            width="300"
          />
          <el-table-column
            prop="description"
            label="属性名称"
            sortable
            width="300"
          />
          <!-- <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="setTop(scope.row)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>

      <div slot="footer">
        <el-button size="mini" @click="closeDialog">取消</el-button>
        <el-button size="mini" type="primary" @click="saveForm">保存</el-button>
      </div>
    </div>
    <div v-else>
      <el-form ref="form" :model="formData" :rules="formRules" size="mini" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="筛选项名称" prop="name" :rules="name">
              <el-input v-model="formData.name" size="mini" laceholder="请输入页面名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否默认选中" prop="isDefaultSelect" :rules="isDefaultSelect">
              <el-radio-group v-model="formData.isDefaultSelect">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button size="mini" @click="closeDialog">取消</el-button>
        <el-button size="mini" type="primary" @click="saveEdit">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { saveScreenThree, editScreenThree, searchItemScreen } from '@/api/shopauxPlat/screenTemplate'
export default {
  name: 'DemoEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    otherFilter: {
      type: [String, Object],
      default: ''
    },
    detailData: {
      type: [String, Object],
      default: ''
    },
    detailDatathree: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/filterTemplateConditionItem/attrListPage`,
        pageSize: 10,
        sort: '',
        order: 'desc',
        onlySearchBar: true,
        setting: [
          {
            prop: 'code',
            label: '属性编码',
            minWidth: 130
          },
          {
            prop: 'description',
            label: '属性名称',
            minWidth: 130
          }]
      },
      submiting: false,
      picFile: [],
      gotoTreeList: [],
      otherFilters: [],
      basicData: [],
      selectData: [],
      props: { multiple: true },
      defaultProps: {
        children: 'childList',
        label: 'categoryName'
      },
      formData: {
        name: '',
        isDefaultSelect: ''
      }

    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    'formData.gotoType': {
      handler(val, oldVal) {

      }
    }
  },
  created() {
    console.log(this.detailDatathree)
    const basic = {}
    basic.id = 'attrId'
    basic.property = 'attrId'
    basic.value = this.detailDatathree.attrId
    basic.operator = '='
    this.otherFilters.push(basic)
    const searchData = {}
    searchData.id = 'deleteFlag'
    searchData.property = 'deleteFlag'
    searchData.value = 'N'
    searchData.operator = '='
    this.otherFilters.push(searchData)
    const data = this.detailData
    if (data) {
      this.formData = Object.assign({}, data)
    }
    //  新增时候,查询数据
    // this.initData(this.detailDatathree)
  },
  mounted() {
  },
  methods: {
    closeDialog() {
      this.dialogShow = false
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
      this.selectData = val
    },
    // 新增提交表单处理
    saveForm() {
      console.log(111)
      const id = this.detailDatathree.id
      const data = []
      for (let i = 0; i < this.selectData.length; i++) {
        data[i] = {}
        data[i].filterTemplateConditionId = this.detailDatathree.id
        data[i].relatedId = this.selectData[i].id
        data[i].name = this.selectData[i].description
      }
      saveScreenThree(id, data).then(res => {
        if (res.success === 1) {
          this.$message.success('保存成功')
          this.$emit('refreshTable')
          this.dialogShow = false
        }
      })
    },
    // 编辑
    saveEdit() {
      editScreenThree(this.formData).then(res => {
        if (res.success === 1) {
          this.$message.success('保存成功')
          this.$emit('refreshTable')
          this.dialogShow = false
        }
      })
    },
    initData(data) {
      searchItemScreen(data).then(res => {
        if (res.success === 1) {
          this.basicData = res.data.records
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.el-col el-col-11{margin-bottom: 20px;}
 .avatar-uploader .el-upload {
    border: 1px dashed #181717;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: 1px dashed #181717;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .footer{
    margin: 10px;
  }
</style>
